import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import './index.css';

interface TabItem {
  key: string;
  title: string;
  icon: string;
  activeIcon: string;
  path: string;
}

interface TabBarProps {
  tabs: TabItem[];
}

const TabBar: React.FC<TabBarProps> = ({ tabs }) => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleTabClick = (path: string) => {
    navigate(path);
  };

  return (
    <div className="tab-bar">
      {tabs.map((tab) => {
        const isActive = location.pathname === tab.path;
        return (
          <div
            key={tab.key}
            className={`tab-bar__item ${isActive ? 'tab-bar__item--active' : ''}`}
            onClick={() => handleTabClick(tab.path)}
          >
            <div className="tab-bar__icon">
              {isActive ? tab.activeIcon : tab.icon}
            </div>
            <div className="tab-bar__title">{tab.title}</div>
          </div>
        );
      })}
    </div>
  );
};

export default TabBar; 